import { defineStore } from 'pinia';
import { Local } from '@/utils/storage';
import { nextTick } from 'vue';

export const useLayoutConfigStore = defineStore('layoutConfig', {
  state: (): LayoutConfigState => {
    return {
      // 是否折叠起菜单：true折叠，false展开
      isCollapse: false,
      tags: [{
        path: '/home',
        name: 'Home',
        meta: {
          title: "首页",
          icon: "ele-HomeFilled",
        },
      }],
      currentMenu: null,
      // 网站主标题
      globalTitle: 'xxx-费用结算系统',
      isFullscreen: false, // 是否全屏状态：true是
      isDrak: false, // 是否暗黑主题：true是
    }
  },
  getters: {
  },
  actions: {
    // 更新状态
    updateState(state: LayoutConfigState) {
      // 将传递的对象属性值更新到state状态中
      this.$patch(state);
    },
    selectMenu(tag: any) {
      if (tag.name === 'Home') {
        this.currentMenu = null
      } else {
        let index = this.tags.findIndex(item => item.name === tag.name)
        index === -1 ? this.tags.push(tag) : ''
      }
    },
    updateTags(tag: any) {
      let index = this.tags.findIndex(item => item.name === tag.name)
      this.tags.splice(index, 1)
    }
  }
});

nextTick(() => {
  const layoutConfig = useLayoutConfigStore();
  // 监听状态变化，将状态执行化
  layoutConfig.$subscribe((mutation, state) => {
    // 保存到浏览器localStorage中
    Local.set('layoutConfig', state);
  });
});



